<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<navigator class="swiper-item" @click="gotoGoods(item)" url="">
					<image :src="item.picUrl" mode="widthFix"></image>
				</navigator>
			</swiper-item>
		</swiper>

		<!-- 分类导航区域 -->
		<view class="category-container">
			<view class="category-box">
				<!-- 每一项 -->
				<view class="category-list" v-for="(item,i) in cateList" :key="i">
					<navigator class="category-column" @click="gotoGoodsList(item)" url="">
						<image :src="item.icon" class="category-imgbox" mode=""></image>
						<view class="category-title">{{item.name}}</view>
					</navigator>
				</view>
			</view>
		</view>

		<!-- 秒杀 -->
		<view class="miaoshaGoods">
			<view class="ttt">
				<view class="l">
					<view class="u-line"></view>
				</view>
				<view class="content">
					<image src="../../static/images/miaosha.png" mode=""></image>
					<view class="innertxt">限时秒杀</view>
				</view>
				<view class="l">
					<view class="u-line"></view>
				</view>
			</view>
			<!-- 秒杀列表 -->
			<navigator class="miaosha-goods-list" v-for="(item,i) in goodsList" :key="i" @click="gotoGoods(item)"
				url="">
				<image class="image" :src="item.pic" mode=""></image>
				<view class="r">
					<!-- 秒杀标题 name-->
					<view class="goods-title">
						{{item.name}}
					</view>
					<!-- 秒杀价格 minPrice 原始价格originalPrice-->
					<view class="miaosha-price-btn">
						<view class="price">
							￥{{item.minPrice}}
							<text>￥{{item.originalPrice}}</text>
						</view>

					</view>
				</view>
			</navigator>
		</view>

		<!-- 商品列表 -->
		<view class="goodslist">
			<view class="ttt">
				<view class="l">
					<view class="u-line"></view>
				</view>
				<view class="content">
					<image src="../../static/images/pingtuan.png" mode=""></image>
					<view class="innertxt">商品列表</view>
				</view>
				<view class="l">
					<view class="u-line"></view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="goods-container">
				<!-- 列表的每一项  图片字段是pic-->
				<navigator class="goods-box" v-for="(item,i) in list" :key="i" @click="gotoGoods(item)" url="">
					<view class="img-box">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="goods-title">
						<view class="">
							{{item.name}}
						</view>
					</view>
					<view class="price-score">
						<view class="item">
							<text>￥{{item.minPrice}}</text>
						</view>
					</view>
				</navigator>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 轮播图数据
				swiperList: [],
                // 入口数据
				cateList: [],
                // 秒杀数据
				goodsList: [],
                // 商品列表数据
				list: []
			}
		},
        onLoad() {
            // 调用轮播图数据
        	this.getSwiperList()
            // 调用入口数据
        	this.getCateList()
            // 调用秒杀数据
        	this.getGoodsList()
            // 调用商品列表数据
        	this.getList()
        },
		methods: {
			// 轮播图
			async getSwiperList() {
				const res = await uni.$http.get('/banner/list?type=index');
				this.swiperList = res.data.data;
			},
			// 跳转到商品详情页
			gotoGoods(item) {
				uni.navigateTo({
					url: '/subpkg/goods_spxq/goods_spxq?id=' + item.id
				})
			},
			// 入口导航
			async getCateList() {
				const res = await uni.$http.get('/shop/goods/category/all');
				this.cateList = res.data.data;
			},
			// 跳转到商品列表页
			gotoGoodsList(item) {
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?id=' + item.id
				})
			},
			// 秒杀
			async getGoodsList() {
				const res = await uni.$http.post('/shop/goods/list/v2?miaosha=true');
				this.goodsList = res.data.data.result;
				// console.log(this.goodsList);
				console.log(res);
				console.log(this.goodsList);
			},
			// 商品列表
			async getList() {
				const res = await uni.$http.post('/shop/goods/list/v2');
				this.list = res.data.data.result;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #fff;
	}

	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.category-container {
		padding: 0 0 10px 0;
		margin-top: 16rpx;
		position: relative;
		background-color: white;

		.category-box {
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			box-shadow: 0px 0px 18px 0px rgba(5, 5, 5, 0.15);
			margin-left: 25rpx;
			margin-right: 25rpx;
			border-radius: 10px;
			padding: 20rpx 0;
			position: inherit;

			.category-list {
				width: 140rpx;
				text-align: center;
				display: inline-block;
				overflow: hidden;

				.category-column {
					width: 100%;
					margin-top: 20rpx;
					overflow: hidden;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.ti {
						font-size: 24rpx;
						text-align: center;
					}
				}
			}
		}
	}

	// 秒杀

	.miaoshaGoods {
		.ttt {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.l {
				flex: 1;
				display: inline-block;

				.u-line {
					margin: 0;
					border-bottom-width: 1px;
					border-bottom-style: solid;
					width: 100%;
					transform: scaleY(0.5);
					border-color: #d6d7d9;

					vertical-align: middle;

					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					flex-grow: 0;
					flex-basis: auto;
					align-items: stretch;
					align-content: flex-start;
				}
			}

			.content {
				display: flex;
				align-items: center;
				padding: 0 16rpx;

				image {
					width: 34rpx;
					height: 42rpx;
				}

				.innertxt {
					margin-left: 16rpx;
					color: #333;
					font-size: 28rpx;
				}
			}

		}

		.miaosha-goods-list {
			margin: 20rpx;
			border-radius: 16rpx;
			display: flex;
			padding: 20rpx;

			.image {
				width: 260rpx;
				height: 260rpx;
				flex-shrink: 0;
				border-radius: 16rpx;
				display: inline-block;
				overflow: hidden;
			}

			.r {
				margin-left: 32rpx;

				.goods-title {
					color: #333;
					font-size: 28rpx;
				}

				.miaosha-price-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						color: #e64340;
						font-size: 40rpx;
						margin-top: 12rpx;
						padding-right: 32rpx;

						text {
							color: #666666;
							font-size: 26rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	// 商品推荐
	.goodslist {
		.ttt {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.l {
				flex: 1;
				display: inline-block;

				.u-line {
					margin: 0;
					border-bottom-width: 1px;
					border-bottom-style: solid;
					width: 100%;
					transform: scaleY(0.5);
					border-color: #d6d7d9;

					vertical-align: middle;

					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					flex-grow: 0;
					flex-basis: auto;
					align-items: stretch;
					align-content: flex-start;
				}
			}

			.content {
				display: flex;
				align-items: center;
				padding: 0 16rpx;

				image {
					width: 34rpx;
					height: 42rpx;
				}

				.innertxt {
					margin-left: 16rpx;
					color: #333;
					font-size: 28rpx;
				}
			}

		}

		// 列表
		.goods-container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: content-box;
			padding: 0 24rpx;

			.goods-box {
				width: 339rpx;
				background-color: #fff;
				overflow: hidden;
				margin-top: 24rpx;
				border-radius: 5px;
				border: 1px solid #D1D1D1;
				padding-bottom: 10rpx;

				.img-box {
					width: 339rpx;
					height: 339rpx;
					overflow: hidden;

					image {
						width: 339rpx;
						height: 339rpx;
					}
				}

				.goods-title {
					padding: 0 4rpx;
					padding-top: 16rpx !important;
					color: #333;
					font-size: 28rpx;
					display: -webkit-box !important;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical !important;
				}

				.price-score {
					display: flex;
					color: #e64340;
					font-size: 38rpx;

					.item {
						padding: 0 8rpx;
						display: flex;
						align-items: center;

						text {
							padding: 0 4rpx;
							font-size: 28rpx;
						}
					}
				}

			}
		}
	}
</style>
